<script>
import HomeCalendar from './HomeCalendar.vue'
export default {
  components: {
    HomeCalendar
  },
  props: ['article'],
  data () {
    return {
      code: '',
      keyMap: {
        pid: 'parent_comment_id',
        id: 'id',
        isAdmin: 'admin_comment'
      },
      commentDatas: []
    }
  },
  methods: {
    submitComment (item) {
      const time = new Date()
      const datamsg =
        time.getFullYear() +
        '-' +
        (time.getMonth() + 1) +
        '-' +
        time.getDate() +
        ' ' +
        time.getHours() +
        ':' +
        time.getMinutes() +
        ':' +
        time.getSeconds()
      console.log('item: ', item)
      const commentItem = {
        id: this.article.id,
        admin_comment: 0,
        avatar: 'https://pic4.zhimg.com/50/v2-9361df6611d4ab9823156f3246336827_hd.jpg?source=1940ef5c',
        create_time: datamsg,
        email: '',
        nickname: '姬军伟',
        parent_comment_id: null,
        content: item.content
      }
      this.commentDatas.push(commentItem)
    }
  }
}
</script>
<template>
  <div style="width: 80%; margin: 0 auto; padding: 20px">
    <div class="left">
      <div class="character" style="height: 50px">
        <div class="character" style="height: 50px; vertical-align: bottom">
          <img
            :src="article.img"
            alt="用户头像"
            style="width: 40px; height: 40px; border-radius: 50%"
          />
          <div
            class="userInfo"
            style="
              display: inline-block;
              font-size: 15px;
              height: 40px;
              vertical-align: bottom;
              margin-left: 20px;
            "
          >
            <span class="name">{{ article.name }}</span>
            <br />
            <span class="time" style="color: rgb(45, 45, 45)">{{
              article.realsetime
            }}</span>
          </div>
        </div>
        <div
          class="partition"
          style="background-color: black; height: 1px"
        ></div>
      </div>
      <div
        class="content"
        style="
          height: 300px;
          font-size: 20px;
          padding: 20px;
          box-sizing: border-box;
        "
      >
        {{ article.content }}
        <br />
        <img
          :src="article.imgs"
          alt=""
          style="width: 100px; height: 100px; margin-top: 20px"
        />
      </div>
      <j-comment
        :key-map="keyMap"
        :showNumber="1"
        :comment-datas="commentDatas"
        @submitComment="submitComment"
        style="width: 95%; margin-top: 40px"
      >
      </j-comment>
    </div>
    <div class="right">
      <HomeCalendar
        style="width: 100%; border-radius: 20px; height: 300px"
      ></HomeCalendar>
      <div style="width: 100%; height: 500px; border-radius: 20px"></div>
    </div>
    <div style="clear: both"></div>
  </div>
</template>
<style lang="less" scoped>
.left {
  width: 77%;
  height: 800px;
  float: left;
  border-radius: 20px;
  box-sizing: border-box;
}
.right {
  float: right;
  width: 22%;
  margin-left: 1%;
  box-sizing: border-box;
}
</style>
